<template>
  <div class="header">组件配置</div>
  <a-tabs :activeKey="activeKey">
    <a-tab-pane key="style" tab="样式">
      <template v-if="configListMap?.style?.length">
        <template v-for="item in configListMap.style" :key="item">
          <ConfigItem :type="item" />
        </template>
      </template>
      <a-empty v-else />
    </a-tab-pane>
    <a-tab-pane key="data" tab="数据">
      <template v-if="configListMap?.data?.length">
        <template v-for="item in configListMap.data" :key="item">
          <ConfigItem :type="item" />
        </template>
      </template>
      <a-empty v-else />
    </a-tab-pane>
    <a-tab-pane key="interaction" tab="交互">
      <template v-if="configListMap?.interaction?.length">
        <template v-for="item in configListMap.interaction" :key="item">
          <ConfigItem :type="item" />
        </template>
      </template>
      <a-empty v-else />
    </a-tab-pane>
  </a-tabs>
</template>
<script setup>
import { ref, computed, provide } from "vue";
import { storeToRefs } from "pinia";
import { useFormStore } from "@/form/design-mode/store/formStore";
import { getConfigListMap } from "@/form/common/component-market";
import ConfigItem from "./configItem.vue";
const formStore = useFormStore();
const { selectedItem } = storeToRefs(formStore);
const activeKey = ref("style");
const configListMap = computed(() => {
  const configListMap = getConfigListMap(selectedItem.value.type);
  return configListMap;
});

const config = computed(() => selectedItem.value.config);
provide("componentSetting", {
  config: config,
  updateConfig: (config) => {
    formStore.updateConfig(config);
  },
});
</script>
